<template>
  <div class="navigate" :class="{ 'nav-hidden': isHidden }">
    <div class="nav-content">
      <div class="nav-left">
        <h1 class="site-title">Mini AI</h1>
      </div>
      <div class="nav-right">
        <div class="user-info">
          <span class="user-avatar">👤</span>
          <span class="user-name">用户</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'

const isHidden = ref(false)
let lastScrollTop = 0

const handleScroll = () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop

  // 当向下滚动超过50px时隐藏，向上滚动时显示
  if (scrollTop > lastScrollTop && scrollTop > 50) {
    isHidden.value = true
  } else if (scrollTop < lastScrollTop) {
    isHidden.value = false
  }

  lastScrollTop = scrollTop
}

// 监听isHidden变化，发送自定义事件
watch(isHidden, (hidden) => {
  window.dispatchEvent(
    new CustomEvent('nav-visibility-change', {
      detail: { hidden },
    }),
  )
})

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style lang="scss" scoped>
.navigate {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  border-bottom: 1px solid #e9ecef;
  z-index: 1000;
  transition: transform 0.3s ease;

  &.nav-hidden {
    transform: translateY(-100%);
  }

  .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 30px;

    .nav-left {
      .site-title {
        font-size: 24px;
        font-weight: bold;
        color: #007bff;
        margin: 0;
      }
    }

    .nav-right {
      .user-info {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 16px;
        background-color: #f8f9fa;
        border-radius: 20px;
        cursor: pointer;
        transition: background-color 0.3s ease;

        &:hover {
          background-color: #e9ecef;
        }

        .user-avatar {
          font-size: 18px;
        }

        .user-name {
          font-size: 14px;
          color: #495057;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
